*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

ul{
    list-style: none;
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
}
a{
    text-decoration: none;
    font-size: 16px;
    color:black;
    font-family: 'Poppins', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    margin-bottom: 15px;
}
body{
    background: rgb(247, 247, 248);
    scroll-behavior: smooth;
    
}
.flex-box{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.containerone{
    width: 1160px;
    padding: 0px 15px;
    margin: auto;
}

button{
    padding: 10px 20px;
    background: #0e2d33;
    color: white;
    cursor: pointer;
    transition: .4s;
    border: none;
    outline: none;
    border-radius: 5px;
    
}
button:hover{
    background: rgb(29, 32, 49);
    transition: .4s;
}



/* -- -------------------------------Navigation-bar---------------------------------    - */


.nav-bar-wrapper {
    background: rgb(30 54 51);
    color: white;
}

.main-bar-wrapper {
    width: 100%;
    justify-content: space-between;
    padding: 10px 0px;
}

.logo {
    width: 15%;
    font-style: oblique;
    font-size: 20px;
    cursor: pointer;
}
.logo a {
    color: white;
    font-size: 26px;
}

.search-input {
    width: 56%;
}

.hero-menu-wrapper {
    width: 22%;
}

li.inner-hero-menu a {
    color: white;
    /* font-size: 8px; */
}

.inner-hero-menu {
    /* width: 14%; */
    padding: 13px 5px;
    border-radius: 4px;
}

.hero-menu {
   
    justify-content: flex-start;

}

.inner-hero-menu:hover {
    background: rgb(123 123 191 / 69%);
}
.bars-icon{
    display: none;
}
#search {
    width: 77%;
    padding: 5px 10px;
    border: none;
    outline-color: #fe7c00;
    border-radius: 5px;
}
.menu-bar-wrapper {
    background: rgb(245, 244, 244);
    /* padding: 30px; */
}

.menubar {
   
    flex-wrap: wrap;
    margin: auto;
   padding-left :0px;
}

.main-menubar {
    width: 100%;
    /* justify-content: center; */
    /* display: flex; */
    /* align-items: center; */
}

.inner-mobile-menu {
    padding: 3px 10px;
}

.inner-mobile-menu:hover a {
    text-decoration: underline;
    color: rgb(7 82 243);
}

.inner-mobile-menu a {
    padding: 2px;

    font-size: 16px;

}

/* <!-- -------------------------------Official Product---------------------------------    -->  */

.ofecial.phone {
    padding: 50px 0px;
    
}

.official-mobile {
    width: 100%;
}

.official-mobile h1 {
    color: black;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.all-offecial-mobile {
    width: 100%;
}

.single-mobile-phone {
    width: 20%;
    overflow: hidden;
    margin-right: 28px;
    margin-bottom: 30px;
    border-radius: 11px;
    background: white;
    padding: 10px;
}

.single-mobile-phone img {
  
    border-radius: 10px;
    transform: translateY(13px);
    transition: .5s;
    
    /*height: 200px;*/
    display: flex;
   
    align-items: center;
    margin: auto;
}


.inner-mobile {
    padding: 10px;
    width: 100%;
    text-align: center;
    color: black;
    background: white;
    /* border-radius: 10px; */
    border-top: 1px solid rgb(171 168 168);
margin-top: 15px;}

.m-price p {
    color: rgb(7 30 249);
}

.m-price del {
    color: rgb(173 44 44);
    font-weight: 600;
}
.inner-mobile h2:hover a {
    text-decoration: underline;
    color: rgb(7 82 243);
}

.discount-phone {
    border: 1px solid rgb(175 174 174 / 40%);
    padding: 50px 0px;
}
.Upcoming-phone{
    padding: 50px 0px;

}

/* <!-- -------------------------------footer---------------------------------    -->   */

.bottom-class {
    background: rgb(30 54 51);
    color: white;
    padding:15px 0px;
}

.footer-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.single-footer {
    width: 23%;
}

.follow-link {
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact-link {width: 100%;padding: 5px 10px;border-bottom: 1px solid rgb(255 255 255 / 25%);cursor: pointer;}

.contact-link a {
    color: rgb(147 139 139);
}

.contact-social-link {
    width: 100%;
}

.contact-social-link img {
    max-width: 100%;
}

.contact-social-link a {
  
color: rgb(187 183 183);
}
.icon-image-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(255 255 255 / 32%);
}
.icon-image {
    margin-right: 10px;
    width: 22px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(249 247 247);
    border-radius: 100%;
    margin-bottom: 10px;
}

.icon-image i {
    font-size: 14px;
    cursor: pointer;
    color: rgb(59 89 153);
}

.icon-image:hover {
    background: rgb(59 89 153);
    color: rgb(210 105 30);
}

.icon-image:hover i {
    color: white;
}
.reserve a {
    color: white;
}


.reserve h5 {
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.terms {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    margin-top: 30px;
}


.reserve a:hover {
    text-decoration: underline;
    color: rgb(253 230 9);
   
    transition: .4s;
}

li.contact-link:hover a {
    color: white;
    transition: .4s;
}

.icon-image-wrapper:hover li a {
    color: white;
    transition: .4s;
    cursor: pointer;
}
.icon-image-wrapper .contact-link {
  
    border-bottom: 1px solid rgb(255 255 255 / 32%);
}
.pro_des {
    text-align: justify;
    margin:auto;
}
.pro_des p {
    
    margin-bottom: 2px;
    text-transform: capitalize;
}

.keyword h6 {
    
    font-family: monospace;
    text-transform: capitalize;
}
.social-ac-icon li a img {
    width: 37px;
}

.social-ac {
    margin: 20px 0px;
}

.social-ac-icon li a {
    cursor: pointer;
    width: 27px;
}

.social-ac-icon li {
    margin-left: 5px;
}


